<template>
    <div id="myForm">
        <form @submit.prevent="submit">
            <div>
                <label for="mobile">手机号</label>
                <input type="text" name="mobile" v-model="mobile" placeholder="请输入手机号">
            </div>
            <div>
                <label for="code">验证码</label>
                <input type="text" name="code" v-model="code" placeholder="请输入验证码">
                <my-code @getcode="getCode" :mobile="mobile"></my-code>
            </div>

            <input type="submit" class="btn" :disabled="disabled" value="登录">
        </form>
    </div>
</template>

<script>
import myCode from '@/components/sendCode/myCode'
const regCode = /^\d{4}$/
export default {
    name: '',
    components:{
        myCode
    },
    data() { 
        return {
            mobile: '',
            code: '',
            disabled: true,
            hasCode: false
        }
    },
    created() {

    },
    methods:{
        showLoading(msg) {
            this.$loading.show(msg)
            setTimeout(() => {
                this.$loading.hide()
            }, 1000)
        },

        checkLogin() {
             if(this.mobile && this.code && this.hasCode) {
                this.disabled = false
            } else {
                this.disabled = true
            }
        },

        getCode(flag) {
            this.hasCode = flag
        },

        submit() {
            if(!regCode.test(this.code)) {
                this.showLoading('验证码不正确')
                return
            }
            this.showLoading('登录成功')
            this.$router.push('/about')
        }
    },

    watch: {
        mobile() {
           this.checkLogin()
        },

        code() {
            this.checkLogin()
        }
    }
}
</script>

<style scoped>
#myForm {
    text-align: center;
}
#myForm div{
    margin-bottom: 20px;
    text-align: left;
}
.btn{
    background-color: green;
    border: none;
    padding: 5px 15px;
    border-radius: 3px;
    color: #fff;
}

input[disabled] {
    background-color: #ccc;
    color: #eee;
}
</style>